<template>
  <div>

    <!-- <input id="btn" placeholder="aa" /> -->
    <key-input class="demo-class"></key-input>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="消费者">
          <el-input v-model="formInline.consumer" placeholder="消费者"></el-input>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-input v-model="formInline.startDate" placeholder="开始日期"></el-input>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-input v-model="formInline.endDate" placeholder="结束日期"></el-input>
        </el-form-item>
        <el-form-item label="收支">
          <el-select v-model="formInline.billType" placeholder="收支">
            <el-option label="支出" value="O"></el-option>
            <el-option label="收入" value="I"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
        <el-table-column prop="id" label="id" width="180">
        </el-table-column>
        <el-table-column prop="consumer" label="消费者" width="180">
        </el-table-column>
        <el-table-column prop="consumeDate" label="消费日期" width="180">
        </el-table-column>
        <el-table-column prop="money" label="消费金额" width="180">
        </el-table-column>
        <el-table-column prop="purpose" label="用途" width="180">
        </el-table-column>
        <el-table-column prop="app" label="支付应用" width="180">
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block" style="margin-top:15px;">
        <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[1,5,10,20]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
        </el-pagination>
      </div>
    </div>
  </div>

</template>
<script>

  import KeyInput from '@/components/KeyInput'
  export default {
    components: {
      KeyInput
    },
    data () {
      return {
        tableData: [],
        currentPage: 1, // 当前页码
        total: 20, // 总条数
        pageSize: 5, // 每页的数据条数
        formInline: {
          user: '',
          region: '',
          consumer: '李易峰',
          startDate: '',
          endDate: '',
          billType: 'O'
        }

      }
    },
    created () {

    },
    mounted () {
      // window.document.getElementById("btn").addEventListener("click", function (e) {
      //   console.log("111", e);
      // }, false);
    },
    destroyed () {

    },
    methods: {

      removeClick () {
        alert("remove...")
      },
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
      },

      onSubmit () {
        console.log(this.formInline)
        var that = this;
        //"&&from=" + this.currentPage + "&&size=" + this.pageSize +
        var request = "?consumer=" + this.formInline.consumer + "&&startDate=" + this.formInline.startDate + "&&endDate=" + this.formInline.endDate
          + "&&billType=" + this.formInline.billType;
        this.$axios.get("/manage/consumeInfos" + request, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
          .then(function (response) {
            console.log(response.data)

            that.total = response.data.data.total
            console.log(response.data.data.hitList)
            var hitList = response.data.data.hitList
            var arrayObj = new Array()
            for (var index in hitList) {

              console.log(JSON.parse(hitList[index]))
              arrayObj.push(JSON.parse(hitList[index]));
            }
            console.log(arrayObj);
            that.tableData = arrayObj;
          }).catch(error => {
            console.log(error)
          })
      }
    }
  }
</script>
<style lang="less">
  body {
    background: #efefef;
  }

  .demo-class {
    input {
      border: 1px solid #ccc;
      outline: none;
      height: 30px;
      font-size: 16px;
      letter-spacing: 2px;
      padding: 0 5px;
    }
  }
</style>